<!DOCTYPE HTML>
<html>

<head>
	<style type="text/css" media="screen">
		@import url(css/master.css);
		@import url(css/slideshow.css);
	</style>
	
	<script src="js/prototype.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/scriptaculous.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/slideshow.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	
	<h1>slideshow.js Examples</h1>
	
	<h2>Basic slideshow</h2>
	<div id="basic" class="slideshow">
		<ul id="basic-ul">
			<li>
				<img src="images/horse.jpg" width="400" height="300" alt="Rocking horse">
			</li>
			<li>
				<img src="images/metro.jpg" width="400" height="300" alt="WMATA Metro Interior">
			</li>
			<li>
				<img src="images/panda.jpg" width="400" height="300" alt="Panda (Taken at the Washington DC National Zoo)">
			</li>
		</ul>
	</div>
	
	<script type="text/javascript" charset="utf-8">
		new Slideshow('basic').create();
	</script>
	
	<h2>Basic slideshow (without javascript enabled)</h2>
	<div class="slideshow">
		<ul>
			<li>
				<img src="images/horse.jpg" width="400" height="300" alt="Rocking horse">
			</li>
			<li>
				<img src="images/metro.jpg" width="400" height="300" alt="WMATA Metro Interior">
			</li>
			<li>
				<img src="images/panda.jpg" width="400" height="300" alt="Panda (Taken at the Washington DC National Zoo)">
			</li>
		</ul>
	</div>
	
	<h2>More advanced settings</h2>
	<div id="advanced" class="slideshow">
		<ul id="advanced-ul">
			<li>
				<img src="images/horse.jpg" width="400" height="300" alt="Rocking horse">
			</li>
			<li>
				<img src="images/metro.jpg" width="400" height="300" alt="WMATA Metro Interior">
			</li>
			<li>
				<img src="images/panda.jpg" width="400" height="300" alt="Panda (Taken at the Washington DC National Zoo)">
			</li>
		</ul>
	</div>
	
	<script type="text/javascript" charset="utf-8">
		var advanced = new Slideshow('advanced');
		advanced.description_template = "Image #{number} of #{total} - #{description}";
		advanced.duration = 1.5;
		advanced.create();
	</script>
	
</body>
</html>